<template>
  <div class="page-container container--pages">
    <transition
      v-on:before-enter="beforeEnter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <div v-show="showAction">
        <stopStatusHeader :title="'旅客流量数据'"></stopStatusHeader>
        <div class="content-flow">
          <div id="flow--left"></div>
          <div class="flow--right">
            <span>每分钟流量变化</span>
            <div class="flowChar" id="flow1"></div>
            <span>每小时流量变化</span>
            <div class="flowChar" id="flow2"></div>
          </div>
        </div>
      </div>
    </transition>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <div v-show="showAction">
        <stopStatusHeader
          :title="'重点区域客流监控'"
          class="flow-header"
        ></stopStatusHeader>
        <div id="content-area" class="content-area"></div>
      </div>
    </transition>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <div v-show="showAction">
        <stopStatusHeader
          :title="'滞留旅客数量曲线'"
          class="flow-header"
        ></stopStatusHeader>
        <div class="content-curve">
          <div id="content-curve"></div>
          <div class="curve-text--left">
            <div>上网</div>
            <div class="right-num">10333人</div>
            <div>下降9.2%</div>
          </div>
          <div class="curve-text--right">
            <div>本地</div>
            <div class="right-orange">133人</div>
            <div>上升3.1%</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import stopStatusHeader from "./stopStatus/stopStatusHeader";
import { barBorderRadius, lineOption,coordinateSystem,elasticOutOption} from "../tools/echarts";
export default {
  name: "passengerFlow",
  components: {
    stopStatusHeader,
  },
  data() {
    return {
      areaList: [
        { name: "接机厅A", value: 30, total: 100 },
        { name: "联系服务区", value: 600, total: 2100 },
        {
          name: "接机厅B",
          value: 80,
          total: 100,
        },
        { name: "值机处", value: 80, total: 100 },
        { name: "地面通道", value: 80, total: 130 },
        {
          name: "安检处",
          value: 80,
          total: 130,
        },
        { name: "托运处", value: 80, total: 130 },
      ],
    };
  },
  mounted(){
    setTimeout(()=>{
      barBorderRadius({id:'content-area'})
      lineOption({id:'content-curve'})
      elasticOutOption({id:'flow1',isSafe:true})
      elasticOutOption({id:'flow2',isSafe:true})
      coordinateSystem({id:'flow--left',color:'rgba(299, 151, 15, 1)',color1:'rgba(299, 151, 15, 0.2)',title:{
            text: '{a|实时流量\n}{c|' + 2334 + '\n}{a|实时负荷\n' + 50 + '%}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 8,
                        lineHeight: 8,
                        color: '#fff'
                    },

                    c: {
                        fontSize: 8,
                        lineHeight: 8,
                        fontWeight: 1000,
                        color: '#fff',
                        // padding: [5,0]
                    }
                }
            }
        }})
    },1000)
    
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/common.scss';
.container--pages{
  display: flex;
  flex-direction: column;
  >div{
    height: 35.8vh;
  }
  >div:last-child{
    height: 28.3vh;
  }
}
.content-flow {
  display: flex;
  color: #4d5559;
  font-size: 12px;
  height: 30vh;
  #flow--left{
    flex: 1;
    height:30vh;
  }
}

.flow--right {
  display: flex;
  flex: 1;
  height: 30vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: cheight(12);
}
.flow--left-num {
  color: #adb3b7;
  font-size: 28px;
}

.flowChar {
  height: cheight(60);
  width: 40vw;
}
.flow--right > span {
  margin: cheight(12);
}
.content-area {
  margin-top: cheight(20);
  height: cheight(200);
  width: 95vw;
}

.area-item {
  display: flex;
  flex-direction: row;
  padding: 0 20px;
  color: #9ba0a1;
  align-items: center;
}

.flow-header {
  margin-bottom: cheight(20);
}

.area-item > span:nth-child(1) {
  width: 80px;
  border-right: 2px solid #1b2329;
}

.area-item-progress {
  width: 168px;
  height: 5px;
  border-radius: 8px;
  margin-right: 10px;
}

.content-curve {
  width: 90vw;
  height: cheight(200);
  display: flex;
  justify-content: space-between;
  color: #4f525a;
  font-weight: 600;
  font-size: 12px;
}
#content-curve{
  position: absolute;
  width: 95vw;
  height: cheight(178);
}
.curve-text--left {
  margin-top: 10px;
}

.curve-text--right {
  margin-top: 10px;
}

.right-num {
  font-size: 18px;
}

.right-orange {
  color: #85622c;
  font-size: 18px;
}
</style>